<template>
    <div class="toplist">
        <div class="title">排行榜</div>
        <el-row :gutter="20" style="margin-top:20px;">
            <toplist-item v-for="(item,index) in list"
                          :id="item.id"
                          :topDetail="topDetail[index]"
                          :info="item"
                          :key="item.id"/>
        </el-row>
    </div>

</template>
<script>
import ToplistItem from './toplist-item'
import {toplist, toplistDetail} from '../../../../api'
export default{
  components: {
    ToplistItem
  },

  data () {
    return {
      list: [],
      topDetail: {}
    }
  },
  mounted () {
    toplist().then(res => {
      this.list = res.list
      console.log(res.list)
    })
    toplistDetail().then(res => {
      this.topDetail = res.list
      console.log(res.list)
    })
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
    .toplist {
        padding: 0 30px;
        box-sizing: border-box;

    }

    .title {
        font-size: 18px;
        letter-spacing: 5px;
    }
</style>